const input = document.getElementById("input1");
const storage = window.localStorage;
const container = document.getElementById("container");

if(storage.getItem("task_num") === null) {
    storage.setItem("task_num", "0");
}
var total = parseInt(storage.getItem("task_num"));
// console.log(total);

const keydownHandler = (e) => {
    if(compositionStatus === true) {
        return;
    }
    let keyCode = e.code;
    if(keyCode === "Enter" || keyCode === "NumpadEnter") {
        if(input.value === "") {
            return;
        }
        const task_name = total++;
        const obj = {
            text: input.value,
            done: false
        }
        storage.setItem(task_name, JSON.stringify(obj)); // 必须化为字符串json才能存储
        input.value = "";
        // console.log(task_name, storage.getItem(task_name))
        storage.setItem("task_num", total);
        updateTasks();
    }
}

const deleteHandler = (e) => {
    // console.log("del clicked!")
    storage.removeItem(e.target.parentNode.id);
    updateTasks();
}

const finishHandler = (e) => {
    // console.log(e.target.parentNode);
    const obj = JSON.parse(storage.getItem(e.target.parentNode.id));
    if(obj.done === false) {
        obj.done = true;
    }
    else {
        obj.done = false;
    }
    storage.setItem(e.target.parentNode.id, JSON.stringify(obj));
    updateTasks();
}

const clearAllHandler = () => {
    storage.clear();
    storage.setItem("task_num", "0");
    total = 0;
    updateTasks();
}

const updateTasks = () => {
    container.innerHTML = "";
    const congInfo = () => {
        const div = document.createElement("div");
        div.innerHTML = "没有任务~";
        div.className = "congratulation"
        container.appendChild(div);    
    }
    if(total === 0) {
        congInfo();
    } else {
        const sec = document.createElement("section");
        sec.className = "displaySection"
        for(let i = total - 1; i >= 0; i--) {
            const task = JSON.parse(storage.getItem(i));
            if(task === null) {
                continue;
            }
            const task_content = task.text;
            const task_status = task.done;
            const task_elmt = document.createElement("div");
            if(task_status === false) {
                task_elmt.className = "taskElement";
            }
            else {
                task_elmt.className = "taskElement taskFinished";
            }
            task_elmt.id = i;

            const checkboxIcon = document.createElement("i");
            checkboxIcon.className = "iconfont iconCheckbox"
            checkboxIcon.addEventListener('click', finishHandler)
            task_elmt.appendChild(checkboxIcon);
            // const finishButton = document.createElement("button")
            // finishButton.innerHTML = "完成";
            // task_elmt.appendChild(finishButton);

            const text = document.createElement("span");
            text.className = "taskText"
            text.innerHTML = task_content;
            task_elmt.appendChild(text);

            const deleteIcon = document.createElement("i");
            deleteIcon.className = "iconfont iconDelete";
            deleteIcon.addEventListener("click", deleteHandler);
            task_elmt.appendChild(deleteIcon);
            // const delButton = document.createElement("button")
            // delButton.innerHTML = "删除";
            // delButton.onclick = deleteHandler;
            // task_elmt.appendChild(delButton);

            sec.appendChild(task_elmt);
        }
        if(sec.innerHTML == "") {
            congInfo();
        }
        else {
            container.appendChild(sec);
        }
    }
}

// 解决中文输入法问题
var compositionStatus = false;
input.addEventListener('compositionstart', () => {
    compositionStatus = true;
})
input.addEventListener('compositionend', () => {
    compositionStatus = false;
})

document.getElementById('clearBut').addEventListener('click', clearAllHandler);
input.addEventListener('keydown', keydownHandler);
window.addEventListener('storage', (e) => {
    // MDN有坑，只有在另一个会话更改了storage才会触发事件
    console.log("storage updated!")
});
window.onload = updateTasks();